﻿<ribbon:RibbonWindow x:Class="ExpensesWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
		Title="Expenses"
		x:Name="ExpensesWindow"
		Width="700" Height="550" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit"
					 WindowStartupLocation="Manual">

    <ribbon:RibbonWindow.Resources>
        <Style TargetType="Label" x:Key="MyLabel">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="50"/>
            <Setter Property="Background" Value="LightBlue" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Label}">
                        <Border BorderThickness="{TemplateBinding BorderThickness}"
								BorderBrush="{TemplateBinding BorderBrush}"
								Padding="{TemplateBinding Padding}"
								SnapsToDevicePixels="true">
                            <Grid>
                                <Rectangle Fill="{TemplateBinding Background}">
                                    <Rectangle.OpacityMask>
                                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                            <GradientStop Color="#80000000" Offset="0.0" />
                                            <GradientStop Color="#E6000000" Offset="0.5" />
                                            <GradientStop Color="#80000000" Offset="1.0" />
                                        </LinearGradientBrush>
                                    </Rectangle.OpacityMask>
                                </Rectangle>
                                <ContentPresenter
									HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
									VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
									RecognizesAccessKey="True"
									SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground"
										Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="Label" x:Key="MyLabelx">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="50"/>
            <Setter Property="Background" Value="LightBlue" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Label}">
                        <Border BorderThickness="{TemplateBinding BorderThickness}"
								BorderBrush="{TemplateBinding BorderBrush}"
								Padding="{TemplateBinding Padding}"
								SnapsToDevicePixels="true">
                            <Grid>
                                <Rectangle Fill="{TemplateBinding Background}">
                                    <Rectangle.OpacityMask>
                                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                            <GradientStop Color="#80000000" Offset="0.0" />
                                            <GradientStop Color="#E6000000" Offset="0.5" />
                                            <GradientStop Color="#80000000" Offset="1.0" />
                                        </LinearGradientBrush>
                                    </Rectangle.OpacityMask>
                                </Rectangle>
                                <ContentPresenter
									HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
									VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
									RecognizesAccessKey="True"
									SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground"
										Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="{x:Type ListBoxItem}" TargetType="{x:Type ListBoxItem}">
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Padding" Value="3" />
            <Setter Property="Opacity" Value=".80" />
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border Background="{TemplateBinding Background}" 
								BorderBrush="{TemplateBinding BorderBrush}" 
								BorderThickness="{TemplateBinding BorderThickness}" 
								Padding="{TemplateBinding Padding}">
                            <ContentPresenter x:Name="ContentSite" 
											  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
											  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                            <LinearGradientBrush.GradientStops>
                                                <GradientStop Offset="0" Color="LightGray"/>
                                                <GradientStop Offset="1" Color="DarkGray"/>
                                            </LinearGradientBrush.GradientStops>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="BorderBrush" Value="Silver" />
                                <Setter Property="Opacity" Value="1"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true" />
                                    <Condition Property="Selector.IsSelectionActive" 
											   Value="false" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" Value="LightGray" />
                                <Setter Property="BorderBrush" Value="DarkGray" />
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Foreground" Value="Gray" />
                </Trigger>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <!--DoubleAnimation Duration="0:0:0.0"                                                 
												 Storyboard.TargetProperty="(ListBoxItem.LayoutTransform).(ScaleTransform.ScaleY)"
												 From="1" To="1.125"/>
									<DoubleAnimation Duration="0:0:0.0"                                                 
												 Storyboard.TargetProperty="(ListBoxItem.LayoutTransform).(ScaleTransform.ScaleX)"
												 From="1" To="1.125"/-->
                                <DoubleAnimation Duration="0:0:0.2"
												 Storyboard.TargetProperty="Opacity"
												 To="1.0" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <!--DoubleAnimation Duration="0:0:0.0"
												 Storyboard.TargetProperty="(ListBoxItem.LayoutTransform).(ScaleTransform.ScaleY)"
												 From="1.125" To="1"/>
									<DoubleAnimation Duration="0:0:0.0"                                                 
												 Storyboard.TargetProperty="(ListBoxItem.LayoutTransform).(ScaleTransform.ScaleX)"
												 From="1.125" To="1"/-->
                                <DoubleAnimation Duration="0:0:0.2"
												 Storyboard.TargetProperty="Opacity" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
        <DataTemplate x:Key="listBoxTemplate">
            <Border BorderBrush="Blue"
					BorderThickness="1"
					CornerRadius="1"
					Margin="1">
                <StackPanel Orientation="Vertical">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding ExpenseType}"
							   Foreground="Blue" 
							   FontWeight="Bold"
								   Name="regoNumber"
								   Margin="1"/>
                        <TextBlock Foreground="Blue" 
							   FontWeight="Bold"
							   Text=" - "
							   Margin="1"/>
                        <TextBlock Text="{Binding ExpenseDate, StringFormat={}{0:dd-MMM-yy}}"
							   Foreground="Blue" 
							   FontWeight="Bold"
							   Name="ExpenseDate"
							   Margin="1"/>
                    </StackPanel>
                    <TextBlock Text="{Binding ExpenseAmount, StringFormat='Amount : {0:C}'}" 
							   Foreground="Green" Name="PersonCode" HorizontalAlignment="Left"  VerticalAlignment="Center"/>
                </StackPanel>

            </Border>
        </DataTemplate>
    </ribbon:RibbonWindow.Resources>

    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <ribbon:Ribbon x:Name="Ribbon" Grid.Row="0">
            <ribbon:RibbonTab x:Name="HomeTab"
							  Header="Expenses">
                <ribbon:RibbonGroup x:Name="Action"
									Header="Action">
                    <ribbon:RibbonButton Label="New" 
										 Name="RibbonButtonNew"
										 LargeImageSource="/images/new_page-32.png" />
                    <ribbon:RibbonButton Label="Save" 
										 Name="RibbonButtonSave"
										 LargeImageSource="/images/filesave-32.png" />
                    <ribbon:RibbonButton Label="Delete" 
										 Name="RibbonButtonDelete"
										 LargeImageSource="/images/Delete-32.png" />
                    <ribbon:RibbonButton Label="Cancel" 
										 Name="RibbonButtonCancel"
										 LargeImageSource="/images/cancel-32.png" />

                </ribbon:RibbonGroup>
                <ribbon:RibbonGroup x:Name="QuickLinks"                                    
									Header="Quick Launch">
                    <ribbon:RibbonButton Label="Petrol" 
										 Name="RibbonButtonPetrol"
										 LargeImageSource="/images/Gas-Station-icon.png" />
                </ribbon:RibbonGroup>
                <ribbon:RibbonGroup x:Name="Configure"                                    
									Header="Configure">
                    <ribbon:RibbonButton Label="Expense Types" 
										 Name="RibbonButtonExpenseType"
										 LargeImageSource="/images/Gas-Station-icon.png" />
                </ribbon:RibbonGroup>

            </ribbon:RibbonTab>
        </ribbon:Ribbon>
        <Grid Grid.Row="1" >
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Expander Width="Auto" ExpandDirection="Right" HorizontalAlignment="Right" Grid.Column="0" >
                    <Expander.Header>
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,0" Width="Auto" Name="ExpanderText">
							<TextBlock.LayoutTransform>
								<TransformGroup>
									<ScaleTransform ScaleX="1" ScaleY="1"/>
								<SkewTransform AngleX="0" AngleY="0"/>
								<RotateTransform Angle="90"/>
								<TranslateTransform X="0" Y="0"/>
							</TransformGroup>
						</TextBlock.LayoutTransform>
						<TextBlock.RenderTransform>
							<TransformGroup>
								<ScaleTransform ScaleX="1" ScaleY="1"/>
								<SkewTransform AngleX="0" AngleY="0"/>
								<RotateTransform Angle="0"/>
								<TranslateTransform X="0" Y="0"/>
							</TransformGroup>
						</TextBlock.RenderTransform>
                        </TextBlock>
                    </Expander.Header>
                    <Border Name="borderHeader" BorderBrush="Gray" BorderThickness="1,1,1,1" CornerRadius="6,6,6,6">
                        <Grid Name="gridListbox">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"></RowDefinition>
                                <RowDefinition></RowDefinition>
                            </Grid.RowDefinitions>

                            <TextBox MinHeight="10" MinWidth="126" Margin="2" Name="searchBox" Grid.Row="0">Search</TextBox>

                            <ListBox Name="listBoxExpense" 
								 Grid.Row="1"
								 VerticalAlignment="Top"
								 ItemTemplate="{StaticResource listBoxTemplate}" 
								 ItemContainerStyle="{DynamicResource ListBoxItem}" 
								 HorizontalContentAlignment="Stretch"                                                          
								 ItemsSource="{Binding ElementName=ExpensesWindow, Path=expenseList}" 
								 BorderThickness="0"></ListBox>
                        </Grid>
                    </Border>
                </Expander>
                <!-- expander -->

                <Border Name="borderCentre" 
					BorderBrush="Gray"
					BorderThickness="1,1,1,1"
					CornerRadius="0,0,6,6"
					Grid.Column="1">
                    <StackPanel>
                        <Grid Name="GridExpense">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"></ColumnDefinition>
                                <ColumnDefinition Width="Auto"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"></RowDefinition>
                                <RowDefinition Height="*"></RowDefinition>
                                <RowDefinition Height="*"></RowDefinition>
                                <RowDefinition Height="*"></RowDefinition>
                                <RowDefinition Height="*"></RowDefinition>
                            </Grid.RowDefinitions>
                            <Label Grid.Column="0" Grid.Row="0" Margin="5,5,5,0" HorizontalAlignment="Right">Transaction</Label>
                            <ComboBox Grid.Column="1" 
								  Grid.Row="0" 
								  HorizontalAlignment="Left" 
								  Margin="5,5,5,0" 
								  Name="ComboBoxExpenseType" 
								  Width="250" 
								  IsEditable="True" 
								  >
                                <!--TextBoxBase.TextChanged="ComboBox_TextChanged"-->
                            </ComboBox>
                            <Label Grid.Column="0" Grid.Row="1" Margin="5,5,5,0" HorizontalAlignment="Right">Date</Label>
                            <my:DatePicker  Grid.Row="1" Grid.Column="1"  Margin="5,5,5,0" Name="DatePickerTransactionDate" Width="120" HorizontalAlignment="Left" />
                            <Label Grid.Column="0" Grid.Row="2" Margin="5,5,5,0" HorizontalAlignment="Right">Amount</Label>
                            <TextBox Grid.Row="2"  Grid.Column="1"  HorizontalAlignment="Left" Margin="5,5,5,0" Name="TextBoxAmount" Width="120" />
                            <Label Grid.Column="0" Grid.Row="3" Margin="5,5,5,0" HorizontalAlignment="Right">One Off</Label>
                            <CheckBox  Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left" Margin="5,5,5,0" Name="CheckBoxOneOff" VerticalAlignment="Center" IsChecked="False"/>
                            <Label Grid.Column="0" Grid.Row="4" Margin="5,5,5,0" HorizontalAlignment="Right">Comment</Label>
                            <TextBox Grid.Column="1" Grid.Row="4" HorizontalAlignment="Left" Margin="5,5,5,0" Name="TextBoxComment" Width="317" Height="90" TextWrapping="Wrap" VerticalScrollBarVisibility="Visible" AcceptsReturn="True" />
                        </Grid>
                    </StackPanel>
                </Border>
                <Border Name="mainOverlay" Grid.Column="1" CornerRadius="6,6,6,6">
                    <DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="LightBlue">
                        <DockPanel.OpacityMask >
                            <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,1">
                                <GradientStop Color="#80000000" Offset="0.0" />
                                <GradientStop Color="#E6000000" Offset="0.5" />
                                <GradientStop Color="#80000000" Offset="1.0" />
                            </LinearGradientBrush>
                        </DockPanel.OpacityMask >
                        <Label  VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource MyLabel}">empty record</Label>
                    </DockPanel>
                </Border>
                <!-- overlay -->
            </Grid>
        </Grid>
    </Grid>
</ribbon:RibbonWindow>
